<template>
  <div class="statisticsContainer">
    <div class="statisticsGrid">
      <div class="statisticsCard bg1">
        <h3 class="cardTitle">今日新增用户</h3>
        <p class="cardValue">{{ chartData.newCount }}</p>
        <p class="cardDesc">
          <span>{{ comparisonText }}</span>
          <span class="comparisonValue" :class="{ 'value-up': newAddCount > 0 }">{{ newAddCount > 0 ? '+' : '' }}{{ newAddCount }}</span>
        </p>
      </div>

      <div class="statisticsCard bg2">
        <h3 class="cardTitle">今日活跃用户</h3>
        <p class="cardValue">{{ chartData.activeCount }}</p>
        <p class="cardDesc">
          <span>{{ comparisonText }}</span>
          <span class="comparisonValue" :class="{ 'value-up': newActiveCount > 0 }">
            {{ newActiveCount > 0 ? '+' : '' }}{{ newActiveCount }}
          </span>
        </p>
      </div>

      <div class="statisticsCard bg3">
        <h3 class="cardTitle">启动次数</h3>
        <p class="cardValue">{{ chartData.startCount }}</p>
        <p class="cardDesc">
          <span>{{ comparisonText }}</span>
          <span class="comparisonValue" :class="{ 'value-up': newStartCount > 0 }">
            {{ newStartCount > 0 ? '+' : '' }}{{ newStartCount }}
          </span>
        </p>
      </div>

      <div class="statisticsCard bg4">
        <h3 class="cardTitle">累计用户</h3>
        <p class="cardValue">{{ chartData.allCount }}</p>
        <p class="cardDesc">2024-01-01～至今</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const props = defineProps({
  chartData: {
    type: Object,
    default: () => ({})
  }
})

const time = ref(1)

// 计算比较文本
const comparisonText = computed(() => {
  switch (time.value) {
    case 2:
      return '较前日'
    case 3:
      return '较上月'
    case 4:
      return '较去年'
    default:
      return '较昨日'
  }
})

// 计算各项数据变化
const newAddCount = computed(() => {
  return props.chartData.newCount - props.chartData.lastNewCount
})

const newActiveCount = computed(() => {
  return props.chartData.activeCount - props.chartData.lastActiveCount
})

const newStartCount = computed(() => {
  return props.chartData.startCount - props.chartData.lastStartCount
})

// 时间变化事件
const emit = defineEmits(['userQueryTimeChange'])
const timeChange = (data) => {
  emit('userQueryTimeChange', data)
}
</script>

<style scoped>
.statisticsContainer {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.statisticsGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 32px;
  height: 100%;
  min-height: 0; /* 防止grid内容溢出 */
}

.statisticsCard {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 32px;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
  overflow: hidden; /* 防止内容溢出 */
  min-height: 0; /* 确保flex子元素不会溢出 */
}

.statisticsCard:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.bg1 {
  background: linear-gradient(135deg, rgba(28, 126, 214, 0.1), rgba(35, 171, 255, 0.2));
}

.bg2 {
  background: linear-gradient(135deg, rgba(25, 196, 115, 0.1), rgba(55, 235, 155, 0.2));
}

.bg3 {
  background: linear-gradient(135deg, rgba(87, 75, 255, 0.1), rgba(130, 119, 255, 0.2));
}

.bg4 {
  background: linear-gradient(135deg, rgba(255, 145, 58, 0.1), rgba(255, 181, 71, 0.2));
}

.cardTitle {
  margin: 0;
  font-size: 28px;
  font-weight: normal;
  color: rgba(255, 255, 255, 0.8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cardValue {
  margin: 16px 0;
  font-size: 48px;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.2;
}

.cardDesc {
  margin: 0;
  font-size: 28px;
  color: rgba(255, 255, 255, 0.6);
  display: flex;
  align-items: center;
  gap: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.comparisonValue {
  color: #ff4d4f;
}

.comparisonValue.value-up {
  color: #52c41a;
}
</style>
